<template>
    <div>
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>用户导入</span>
                </div>
            </div>
            <el-button size="medium" class="mar_l20"><a :href="dloadUrl()">下载模板</a></el-button>
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="用户标签">
                    <el-select v-model="form.vipLabel" placeholder="请选择用户标签">
                        <el-option
                                v-for="item in labelData"
                                :key="item.id"
                                :label="item.labelName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--      <el-form-item label="手机号码">-->
                <!--        <el-radio-group v-model="form.resource">-->
                <!--          <el-radio label="1">已验证</el-radio>-->
                <!--          <el-radio label="2">未验证</el-radio>-->
                <!--        </el-radio-group>-->
                <!--      </el-form-item>-->
                <el-form-item label="数据文件">
                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                               :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
                               multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :data="uploadData"
                               :auto-upload="true" :on-change="changeFile" accept=".xls,.xlsx">
                        <el-button size="medium" type="primary" class="el-button-small">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传xls,xlsx文件，且不超过200kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">导入</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c tablecenter">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>导入记录</span>
                </div>
            </div>
            <el-table
                    :data="list"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="time"
                        label="最后导入时间"
                >
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="导入用户数"
                >
                </el-table-column>
                <!--        <el-table-column-->
                <!--                prop="success"-->
                <!--                label="导入成功会员数"-->
                <!--        >-->
                <!--        </el-table-column>-->
                <!--        <el-table-column-->
                <!--                prop="sb"-->
                <!--                label="导入失败会员数"-->
                <!--        >-->
                <!--        </el-table-column>-->
                <!--        <el-table-column-->
                <!--                prop="zt"-->
                <!--                label="导入状态"-->
                <!--        >-->
                <!--          <template slot-scope="scope">-->
                <!--            <div class="color-orange">导入成功</div>-->
                <!--            <div class="color-red">导入失败</div>-->
                <!--          </template>
                        </el-table-column>-->
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import index from '../../api/index';
    import {getMemberLabel, memberExcelList} from "@/api/user";

    export default {
        created() {
            this.init();
            this.fetchData();
        },
        data() {
            return {
                form: {
                    vipLabel: '',
                },
                list: [],
                // listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                labelData: [],

                fileList: [],
                upload: '',
                file: '',
                loading: false,
                uploadData: {
                    dataType: "0",
                    oldFilePath: "",
                },
            }
        },
        methods: {
            async fetchData() {
                // this.listLoading = true;
                const {data, count} = await memberExcelList({page: this.page.currentPage});
                this.list = data;
                this.page.total = count;
                setTimeout(() => {
                    this.listLoading = false;
                }, 100);
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            async init() {
                const {data} = await getMemberLabel();
                this.labelData = data;
            },

            dloadUrl: function () {
                let backendPath = index.backendPath
                return backendPath + "channel/member/excel-down";
            },
            handleRemove(file, fileList) {
                // console.log(file, fileList);
            },
            handlePreview(file) {
                // console.log(file);
            },
            //文件超出的的提示
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            changeFile(file, fileList) {
                // console.log(file,fileList)
                this.file = file
                this.fileList = fileList
                var This = this;
                var reader = new FileReader();
                reader.readAsDataURL(file.raw);
                reader.onload = function (e) {
                    this.result // 这个就是base64编码了
                    This.imageUrl = this.result;
                    // console.log('result',this.result)
                }
            },
            async onSubmit() {
                var formData = new FormData();
                formData.append("file", this.file.raw);
                formData.append("vipLabel", this.form.vipLabel);
                // console.log('file',this.file.raw,formData)
                this.$api.post('channel/member/member-input', formData, res => {
                    if (res.code == 1) {
                        this.$message.success(res.msg);
                        this.fetchData();
                    } else {
                        this.$message.success(res.msg);
                    }
                });
            }
        }
    }
</script>
